<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@include file="../taglibs.jsp" %>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link rel="stylesheet" type="text/css" href="${path}/static/common/bootstrap-3.3.7-dist/css/bootstrap.css"/>
<link rel="stylesheet" type="text/css" href="${path}/static/common/layui/css/layui.css"/>
</head>
<body>
	<form id="form" class="layui-form layui-form-pane" action="">
	
<!-- **********	1.商品名称	************	 -->
	  <div class="layui-form-item">
	    <label class="layui-form-label">商品名称</label>
	    <div class="layui-input-block">
	      <input type="text" name="name" autocomplete="off" placeholder="请输入商品名称" class="layui-input">
	    </div>
	  </div>
	  
<!-- **********	2.商品副标题	************	 -->
	  <div class="layui-form-item">
	    <label class="layui-form-label">商品副标题</label>
	    <div class="layui-input-block">
	      <input type="text" name="subtitle" lay-verify="required" placeholder="请输入商品副标题" autocomplete="off" class="layui-input">
	    </div>
	  </div>
  
<!-- **********	3.商品分类inline + select下拉 二级联动  + 下拉需要引用模块	************	 -->
	  <div class="layui-form-item">
	    <label class="layui-form-label">商品分类</label>
	    <div class="layui-input-inline">
	      <select id="topCategoryId" lay-filter="topCategoryFilter" >
	        <option value="">请选择一级分类</option>
      <!-- ******** 3.1. 取取出 一级联动 集合    遍历，，添加监听(点击选择好一级联动，把对应的一级id传给 二级联动方法) **************************************-->
	        <c:forEach items="${topCategoryList}" var="category">
		        <option value="${category.id}" >${category.name}</option>
	        </c:forEach>
	      </select>
	    </div>
	    <div class="layui-input-inline">
	      <select id="secondCategoryId" name="categoryId">
	      </select>
	    </div>
	  </div>
	  
<!-- **********	4.商品价格	************	 -->
	  <div class="layui-form-item">
	    <label class="layui-form-label">商品价格</label>
	    <div class="layui-input-block">
	      <input type="text" name="price" autocomplete="off" placeholder="请输入商品价格" class="layui-input">
	    </div>
	  </div>
	  
<!-- **********	5.商品库存 数量	************	 -->
	   <div class="layui-form-item">
	    <label class="layui-form-label">商品库存</label>
	    <div class="layui-input-block">
	      <input type="text" name="stock" autocomplete="off" placeholder="请输入商品库存" class="layui-input">
	    </div>
	  </div>
	  
<!-- **********	6.商品库存  checkbox复选框  引用模块	************	 -->
	  <div class="layui-form-item" pane="">
	    <label class="layui-form-label">商品状态</label>
	    <div class="layui-input-block">
	      <input type="radio" name="status" value="1" title="在售" checked="">
	      <input type="radio" name="status" value="2" title="下架">
	    </div>
	  </div>
	  
  <!-- **********	7. 020.03.19        7.1.图片上传  引用模块	 use "upload"************	 -->
	  <div class="layui-form-item" pane="">
	      <label class="layui-form-label">商品主图</label>
		  <div class="layui-upload layui-input-block">
			  <div class="layui-upload-list">
			  	<input type="hidden" name="mainImage" id="mainImageInputId"/>
			    <img class="layui-upload-img" id="mainImageId" width="150px" height="150px">
			    <p id="demoText"></p>
			    <button type="button" class="layui-btn" id="uploadBtnId">上传图片</button>
			  </div>
		  </div> 
	  </div>  

  <!-- **********	8. 2020.03.20    富文本编辑    普通的多行框 引用富文本功能************	 -->	  
	  <div class="layui-form-item layui-form-text">
	    <label class="layui-form-label">商品详情</label>
	    <div class="layui-input-block">
	      <textarea id="editor_id" name="detail" placeholder="请输入内容" class="layui-textarea"></textarea>
	    </div>
	  </div>
	  	  
   </form>
   
   <button class="layui-btn" onclick="submitForm()">添加</button>
   
   
 <!-- JS具体实现方法 -->
   <script src="${path}/static/common/jquery-2.1.4.js" type="text/javascript" charset="utf-8"></script>
   <script src="${path}/static/common/layer/layer.js" type="text/javascript" charset="utf-8"></script>
   <script src="${path}/static/common/mylayer.js" type="text/javascript" charset="utf-8"></script>
   <script src="${path}/static/common/layui/layui.js" type="text/javascript" charset="utf-8"></script>
   
   	<!--  2020-03.20富文本引入 英语包 汉语包 -->
   <script src="${path}/static/common/kindeditor/kindeditor.js" type="text/javascript" charset="utf-8"></script>
   <script src="${path}/static/common/kindeditor/lang/zh_CN.js" type="text/javascript" charset="utf-8"></script>
   
   <script type="text/javascript">
/* 0.引用layui模块 */
   	   layui.use(["form", "upload"], function() {
   			var form = layui.form;
   			
   			/* 2020.03.19- 7.2图片上传 */
   			var upload = layui.upload;
   			
   			/* 2020.03.19- 7.3图片上传 */
   		    //普通图片上传
	   		var uploadInst = upload.render({
	   		    elem: '#uploadBtnId'
	   		    ,url: '${path}/upload/uploadImg.action' //改成您自己的上传接口
	   		    ,before: function(obj){// 这个预览是在前台，和后台没有关系
	   		      //预读本地文件示例，不支持ie8
	   		      obj.preview(function(index, file, result){
	   		        $('#mainImageId').attr('src', result); //图片链接（base64）
	   		      });
	   		    }
	   		    ,done: function(result){
	   		       if(result.success) {
	   		    	   // result.data返回的是图片的名字
	   		    	   console.log("进入到了 上传图片名字的判断");
	   		    		console.log(result.data);
	   		    		$("#mainImageInputId").val(result.data);	
	   		       }
	   		    }
	   		    ,error: function(){
	   		      //演示失败状态，并实现重传
	   		      var demoText = $('#demoText');
	   		      demoText.html('<span style="color: #FF5722;">上传失败</span> <a class="layui-btn layui-btn-xs demo-reload">重试</a>');
	   		      demoText.find('.demo-reload').on('click', function(){
	   		        uploadInst.upload();
	   		      });
	   		    }
	   		});
   		    /* 2020.03.19-图片上传模块 */

/* 2020.03.19-   1.选择 二级分类 下拉框   实现方法*/
   			// 1.监听 选择好 一级分类 把一级的id 传到二级分类实现方法
   			form.on("select(topCategoryFilter)", function(data) {
   				// 打印测试 取到的一级分类的值，，，data：当前选中的option标签对象(js dom)
   				console.log(data.value);
			//2.二级分类 ajax
   				$.post(
   					//2.1.跳转到 CategoryController后台 取二级分类的集合
   					"${path}/category/selectSecondCategoryByTopCategoryId.action",
   					//2.2 把一级分类的id传过去     根据一级id取对应二级的信息
   					{"topCategoryId" : data.value},
   					//2.3 回调 (拿到了二级的信息)
   					function(result) {
   						// 打印测试下  取到哪些二级信息
   						console.log(result);
   						//2.3.1.先清空 二级下拉框当前内容   (可能有之前遗留的，不清除会把新查到的追加在之前的后面)
   						$("#secondCategoryId").empty();
   						//2.3.2.二级下拉框  点击显示一个 '请选择二级分类'
   						$("#secondCategoryId").append("<option value=''>请选择二级分类</option>");
   						//2.3.3.二级下拉框  遍历显示出 Result.data（List<Category>），所有二级分类
   						$(result.data).each(function() {
   							// this代表当前正在遍历的Category对象
   							var html = "<option value='"+this.id+"'>"+this.name+"</option>";
   							$("#secondCategoryId").append(html);
   						});
   						//2.3.4. 刷新select标签，重新渲染
   						form.render("select");
   					},
   					//2.4 json格式 接收回调
   					"json"
   				);
   			});
   	   });
   
/* 2.添加    按钮        发送insert到product后台*/
	   function submitForm() {
			$.post(
				"${path}/product/insert.action",
				$("#form").serialize(),
				function(result) {
					console.log(result);
					if(result.success) {
						mylayer.successMsg(result.msg);
						//当你在iframe页面关闭自身时获得当前弹出框的index索引
						var index = parent.layer.getFrameIndex(window.name);
						// js一个方法，定时器，1000毫秒之后自动执行function里面的代码
						setTimeout(function() {
							 // 关闭弹出层
							 parent.layer.close(index); 
							 // 刷新父页面
							 window.parent.location.reload();
						}, 1000);
					} else {
						mylayer.errorMsg(result.msg);
					}
				},
				"json"
			);
			
		}

// 	8. 2020.03.20    富文本编辑    多行框 引用 富文本功能
	   KindEditor.ready(function(K) {
		    var kingEditorParams = {
		         afterBlur: function () { this.sync(); }
		    }
		    KindEditor.create('#editor_id', kingEditorParams);
		});
	   
	</script>
</body>
</html>